<%-- 
    Document   : signUp
    Created on : Oct 25, 2012, 11:46:35 PM
    Author     : ntfsbk
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SignUp</title>
        <link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>/css/signUp.css"/>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/signUp.js"></script>
    </head>

    <body>
        <!--<div class="top">
            <div class="txtHeader">
                <h1> Sign up for your free SE K53 account.</h1>
                <p> All your photos in one place and everything you want to do with them.</p>
            </div>
        </div>-->

        <div class="body" style="background-image:url(<%= request.getContextPath()%>/images/bg4nSE1.png)">
            <form class="signUp-frame">

                <input id="username" type="text" able="false" placeholder="Username" data-original-title="Usernames must be at least 3 characters long. They can only contain the characters a-z, A-Z, 0-9, -, _, and must begin with either a letter, a number, or an underscore. Spaces are not allowed." value="" name="username">
                    <input type="hidden" id="urlCheckExisted" value="<%= request.getContextPath()%>/login/checkExistedUser.htm"/>
                    <label id="userEmpty" style="display: none">
                        <font color="red">This field is required.</font>
                    </label>
                    <label id="strangeCharUser" style="display: none">
                        <font color="red">User Name only contain A-Z,a-z,1-9,_</font>
                    </label>
                    <label id="existedUser" style="display: none">
                        <font color="red">This username is unavailable</font>
                    </label>
                    <br />

                    <input id="password" type="password" able="false" placeholder="Password" data-original-title="A good password contains both letters and numbers and is at least 6 characters in length. This makes it harder for someone to guess." value="" name="password">
                        <label id="pass1Empty" style="display: none">
                            <font color="red">This field is required.</font>
                        </label>
                        <br />

                        <input id="password_confirm" type="password" able="false" placeholder="Re-type Password" data-original-title="A good password contains both letters and numbers and is at least 6 characters in length. This makes it harder for someone to guess." value="" name="password_confirm">
                            <label id="pass2Empty" style="display: none">
                                <font color="red">
                                    This field is required.
                                </font>
                            </label>
                            <label id="pass2NotMatch" style="display: none">
                                <font color="red">
                                    Password is not matched
                                </font>
                            </label>
                            <br />

                            <input id="email" type="email" able="false" placeholder="Email" data-original-title="We'll need this in case you forget your password. You'll also receive our newsletter, but you can turn it off in your account settings." value="" name="email">
                                <input type="hidden" id="urlCheckMail" value="<%= request.getContextPath()%>/login/checkEmail.htm"/>
                                <label id="emailEmpty" style="display: none">
                                    <font color="red">
                                        This field is required.
                                    </font>
                                </label>
                                <label id="errorEmail" style="display: none">
                                    <font color="red">
                                        This is not email.
                                    </font>
                                </label>
                                <label id="existedEmail" style="display: none">
                                    <font color="red">
                                        This email is unavailable.
                                    </font>
                                </label>
                                <br />

                                <div class="gender-birth" id ="gender" able="true">
                                    <label class="radio inline">
                                        <input id="genderM" type="radio" value="M" name="gender" checked> Male
                                    </label>
                                    <label class="radio inline">
                                        <input id="genderF" type="radio" value="F" name="gender"> Female
                                    </label>
                                </div>

                                <div class="gender-birth" id="birth" able="false">
                                    Birth Date:
                                    <select id="birthMonth" name="birthMonth">
                                        <option value="01">January</option>
                                        <option value="02">February</option>
                                        <option value="03">March</option>
                                        <option value="04">April</option>
                                        <option value="05">May</option>
                                        <option value="06">June</option>
                                        <option value="07">July</option>
                                        <option value="08">August</option>
                                        <option value="09">September</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                    </select>

                                    <select id="birthDay" name="birthDay">
                                        <option value="01">1</option>
                                        <option value="02">2</option>
                                        <option value="03">3</option>
                                        <option value="04">4</option>
                                        <option value="05">5</option>
                                        <option value="06">6</option>
                                        <option value="07">7</option>
                                        <option value="08">8</option>
                                        <option value="09">9</option>
                                        <option value="10">10</option>
                                        <option value="11">11</option>
                                        <option value="12">12</option>
                                        <option value="13">13</option>
                                        <option value="14">14</option>
                                        <option value="15">15</option>
                                        <option value="16">16</option>
                                        <option value="17">17</option>
                                        <option value="18">18</option>
                                        <option value="19">19</option>
                                        <option value="20">20</option>
                                        <option value="21">21</option>
                                        <option value="22">22</option>
                                        <option value="23">23</option>
                                        <option value="24">24</option>
                                        <option value="25">25</option>
                                        <option value="26">26</option>
                                        <option value="27">27</option>
                                        <option value="28">28</option>
                                        <option value="29">29</option>
                                        <option value="30">30</option>
                                        <option value="31">31</option>
                                    </select>

                                    <select id="birthYear" name="birthYear">
                                        <option value="2012">2012</option>
                                        <option value="2011">2011</option>
                                        <option value="2010">2010</option>
                                        <option value="2009">2009</option>
                                        <option value="2008">2008</option>
                                        <option value="2007">2007</option>
                                        <option value="2006">2006</option>
                                        <option value="2005">2005</option>
                                        <option value="2004">2004</option>
                                        <option value="2003">2003</option>
                                        <option value="2002">2002</option>
                                        <option value="2001">2001</option>
                                        <option value="2000">2000</option>
                                        <option value="1999">1999</option>
                                        <option value="1998">1998</option>
                                        <option value="1997">1997</option>
                                        <option value="1996">1996</option>
                                        <option value="1995">1995</option>
                                        <option value="1994">1994</option>
                                        <option value="1993">1993</option>
                                        <option value="1992">1992</option>
                                        <option value="1991">1991</option>
                                        <option selected="selected"value="1990">1990</option>
                                        <option value="1989">1989</option>
                                        <option value="1988">1988</option>
                                        <option value="1987">1987</option>
                                        <option value="1986">1986</option>
                                        <option value="1985">1985</option>
                                        <option value="1984">1984</option>
                                        <option value="1983">1983</option>
                                        <option value="1982">1982</option>
                                        <option value="1981">1981</option>
                                        <option value="1980">1980</option>
                                        <option value="1979">1979</option>
                                        <option value="1978">1978</option>
                                        <option value="1977">1977</option>
                                        <option value="1976">1976</option>
                                        <option value="1975">1975</option>
                                        <option value="1974">1974</option>
                                        <option value="1973">1973</option>
                                        <option value="1972">1972</option>
                                        <option value="1971">1971</option>
                                        <option value="1970">1970</option>
                                        <option value="1969">1969</option>
                                        <option value="1968">1968</option>
                                        <option value="1967">1967</option>
                                        <option value="1966">1966</option>
                                        <option value="1965">1965</option>
                                        <option value="1964">1964</option>
                                        <option value="1963">1963</option>
                                        <option value="1962">1962</option>
                                        <option value="1961">1961</option>
                                        <option value="1960">1960</option>
                                        <option value="1959">1959</option>
                                        <option value="1958">1958</option>
                                        <option value="1957">1957</option>
                                        <option value="1956">1956</option>
                                        <option value="1955">1955</option>
                                        <option value="1954">1954</option>
                                        <option value="1953">1953</option>
                                        <option value="1952">1952</option>
                                        <option value="1951">1951</option>
                                        <option value="1950">1950</option>
                                        <option value="1949">1949</option>
                                        <option value="1948">1948</option>
                                        <option value="1947">1947</option>
                                        <option value="1946">1946</option>
                                        <option value="1945">1945</option>
                                        <option value="1944">1944</option>
                                        <option value="1943">1943</option>
                                        <option value="1942">1942</option>
                                        <option value="1941">1941</option>
                                        <option value="1940">1940</option>
                                        <option value="1939">1939</option>
                                        <option value="1938">1938</option>
                                        <option value="1937">1937</option>
                                        <option value="1936">1936</option>
                                        <option value="1935">1935</option>
                                        <option value="1934">1934</option>
                                        <option value="1933">1933</option>
                                        <option value="1932">1932</option>
                                        <option value="1931">1931</option>
                                        <option value="1930">1930</option>
                                        <option value="1929">1929</option>
                                        <option value="1928">1928</option>
                                        <option value="1927">1927</option>
                                        <option value="1926">1926</option>
                                        <option value="1925">1925</option>
                                        <option value="1924">1924</option>
                                        <option value="1923">1923</option>
                                        <option value="1922">1922</option>
                                        <option value="1921">1921</option>
                                        <option value="1920">1920</option>
                                        <option value="1919">1919</option>
                                        <option value="1918">1918</option>
                                        <option value="1917">1917</option>
                                        <option value="1916">1916</option>
                                        <option value="1915">1915</option>
                                        <option value="1914">1914</option>
                                        <option value="1913">1913</option>
                                        <option value="1912">1912</option>
                                    </select> 
                                </div>           


                                <br />   
                                <input type="hidden" id="urlSignUp" value="<%= request.getContextPath() %>/login/insertNewUser.htm"/>
                                <span class="signup-button">
                                    <input type="button" id="link-signup" class="button button-red" value="Sign Up" url="<%= request.getContextPath() %>/myphoto/myPhoto.htm">
                                </span>
                                <label id="signUpErr" style="display: none"><font color="red" >Please enter full informations</font></label>
                                <label id="signUpErr2" style="display: none"><font color="red" >Sign up fail, please try again latter</font></label>
                                </form>
                                </div>

                                <div id="footer">
                                    <p id="copyright"> Powered by 4nSE, SE K53, Hanoi University of Science and Technology.</p>
                                </div>
                                </body>
                                </html>
